<template>
  <div class="collect">
    <!-- <h1>收藏</h1> -->
    <header class="collect_header">
      <div class="collect_header_pbox">收藏</div>
      <div class="collect_header_imgBox" @click="gotoLoginFn">
        <img src="../assets/left.png" />
      </div>
    </header>
    <!-- 循环 -->
    <main class="collect_header_main">
      <div
        class="collect_header_main_box"
        v-for="item in loginarr"
        :key="item.id"
        @click="gotonewspagesFn(item.id)"
      >
        <div class="collect_header_main_left">
          <p>{{ item.title }}</p>
        </div>
        <div class="collect_header_main_right">
          <img :src="item.image" />
        </div>
      </div>
    </main>
    <!-- 循环结束 -->
    <!-- 底部 -->
    <footer class="collect_header_footer">
      <!-- 空空如也 -->
      <div class="collect_header_footer_pbox" v-if="isShowCollect">
        您还没有收藏喔~~~
      </div>
      <!-- 收藏后 -->
      <div class="collect_header_footer_pbox" v-if="isShowhasCollect">
        暂时没有更多内容了喔~~~
      </div>
    </footer>
  </div>
</template>

<style lang="less" scoped>
.collect {
  .collect_header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid gray;

    .collect_header_pbox {
      font-weight: 700;
      font-size: 32px;
    }

    .collect_header_imgBox {
      position: fixed;
      top: 20px;
      left: 10px;

      img {
        width: 45px;
      }
    }
  }

  .collect_header_main {
    width: 100%;

    .collect_header_main_box {
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .collect_header_main_left {
        flex: 1;
        padding: 0 7px 0 0;

        p {
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-wrap: break-word;
          text-overflow: ellipsis;
          font-size: 21px;
          font-weight: 700;
          color: gray;
        }
      }

      .collect_header_main_right {
        img {
          width: 90px;
        }
      }
    }
  }

  .collect_header_footer {
    .collect_header_footer_pbox {
      color: gray;
      text-align: center;
      padding: 25px;
    }
  }
}
</style>



<script>
import { storiespagescollect } from "@/api/index";

export default {
  name: "CollectView",
  data() {
    return {
      isShowCollect: true,
      isShowhasCollect: false,
      logintitle: "",
      loginarr: [],
      storyId: "",
      myid: "",
    };
  },
  methods: {
    gotoLoginFn() {
      this.$router.push({ path: "/myself" }).catch(() => {});
    },
    collectFn() {
      let getloginuser = JSON.parse(localStorage.getItem("USERID"));
      let getloaclid = JSON.parse(localStorage.getItem("LOGINID"));

      if (getloaclid !== null) {
        console.log(getloaclid, getloginuser);
        let arr = getloaclid.filter((item) => {
          return item.userid * 1 === getloginuser;
        });
        console.log(arr);
        let getstoryid = arr.map((item) => {
          return item.storyid;
        });
        console.log("显示收藏ID", getstoryid);
        this.storyId = getstoryid;
      }

      if (this.storyId !== null) {
        this.isShowCollect = false;
        this.isShowhasCollect = true;
      } else {
        this.isShowCollect = true;
        this.isShowhasCollect = false;
      }

      // 在获取收藏 ID 后调用获取故事内容的方法
      this.storiespagesFn(this.storyId);
    },
    async storiespagesFn(id) {
      try {
        const content = await storiespagescollect({}, id);
        this.loginarr = [content.story];
        console.log(this.loginarr);
      } catch (error) {
        console.log("获取数据失败", error);
      }
    },
    gotonewspagesFn(id) {
      this.$router
        .push({ path: "/newspaper", query: { id: id } })
        .catch(() => {});
    },
  },
  created() {
    this.collectFn(); // 在组件创建时调用获取收藏的故事 ID 的方法
    this.myid = this.storyId[0]
    console.log("观看故事ID",this.myid);
  },
};
</script>

